<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../js/vue.js"></script>
    <title>04_el与data的两种写法</title>
</head>

<body>
    <div id="root">
        <h1>学校名字: {{name}}</h1>
        <h1>学校地址: {{address}}</h1>
        <!-- <h1>{{$children}}</h1>
        <h1>{{$options}}</h1> -->

    </div>


    <!-- //容器 -->
    <div id="root_1">
        <h1>{{name}},{{sex}},{{sno}}</h1>

        2 <input type="text" :value="address"><br>
        2 <input type="text" v-model="address"><br>
        <!-- 单向数据绑定：
        <input type="text" name="" id="" :value="name"><br>
        单向数据绑定：
        <input type="text" name="" id="" v-model="name">
 -->

    </div>

    <!-- el data -->
    <div id="root_2">
        <h1>{{name}}</h1>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: "#root_2",
        // data: {
        //     name: 'keke'
        // },
        data: function () {
            return {
                name: "lllll"
            }
        },
        data() {
            return {
                name: "lllll"
            }
        }
    });
    vm.$mount("#root_2");

    const vm = new Vue({
        el: "#root",
        data: {
            name: '尚硅谷',
            address: 'shanghai'
        }
    });
    console.log(vm);

    new Vue({
        el: "#root_1",
        data: {
            name: "keke",
            sex: "fel",
            sno: 83883,
            address: "尚硅谷33333333"
        }
    });
</script>

</html>